<template>
	<view class="flex-col h100">
		<view class="">
			<u-navbar title="统计分析" :placeholder="true" leftIconColor="#fff" titleStyle="color: #fff" bgColor="#2172FC" :autoBack="true">
				<template #right>
					<u-icon name="search" color="#fff" size="25" @click="show = true"></u-icon>
				</template>
			</u-navbar>
		</view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">数据总览</text></view>
					</template>
					<my-grid :list="list" :col="2"></my-grid>
				</u-collapse-item>
				<u-collapse-item name="2" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">数据分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" ontouch />
					</view>
				</u-collapse-item>
				<u-collapse-item name="3" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">数据详情</text></view>
					</template>
					<my-table :data="tableData" :columns="columns" emptyText="暂无数据"></my-table>
					<view class="uni-pagination-box">
						<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<up-datetime-picker :show="show" v-model="dateValue" mode="year-month" @cancel="cancel" @close="close" @confirm="confirm"></up-datetime-picker>
	</view>
</template>

<script setup>
import { computed, reactive, ref, watch,nextTick } from 'vue';
import { getInformationPage, getInformation } from '@/api/manage.js';
import { onShow } from '@dcloudio/uni-app';
import date from '@/utils/date.js';
import { debounce } from '@/utils'

const collapse = ref(null),
	showMoreKeys = ref([1, 2, 3]);

const show = ref(false);
const dateValue = ref(Date.now());
const newdate = ref(date(new Date(), 'YYYY-MM'));

// 取消
const cancel = () => {
	show.value = false;
};
// 确定
const confirm = (val) => {
	show.value = false;
	newdate.value = date(new Date(val.value), 'YYYY-MM')
	loadFn()
	// watch(
	// 	() => date(new Date(dateValue.value), 'YYYY-MM'),
	// 	(val) => {
	// 		newdate.value = val;
	// 		// loadFn()
	// 		console.log(newdate)
	// 	}
	// );
};
// 关闭
const close = () => {
	show.value = false;
};
let totalData =ref({})
let list = computed(()=>{
	return [
		{
			title: '违章总人数',
			value: totalData.value?.totalNum?totalData.value?.totalNum:0
		},
		{
			title: '一般违章人数',
			value:  totalData.value.tmap?.label1?totalData.value.tmap?.label1:0
		},
		{
			title: '严重违章人数',
			value: totalData.value.tmap?.label2?totalData.value.tmap?.label2:0
		},
		{
			title: '重大违章人数',
			value: totalData.value.tmap?.label3?totalData.value.tmap?.label3:0
		}
	]
})

const opts = computed(()=>({
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 20],
		dataLabel: false,
		// dataPointShape: false,
		enableScroll: true,
		legend: {
			position: 'top',
			margin: 10
		},
		
		xAxis: {
			disableGrid: true,
			calibration: true,
			scrollShow: true,
			itemCount: 5,
			rotateLabel: true,
			rotateAngle: 30,
		},
		yAxis: {
			gridType: 'dash',
			showTitle: true,
			data: [
				{
					min: 0,
					axisLine: false,
					title: '次数',
					titleOffsetX: -5,
					titleOffsetY: -5
				}
			]
		},
		extra: {
			line: {
				type: 'straight',
				width: 2,
				activeType: 'hollow'
			}
		}
	})),
	//初始值为空 防止抖动
	chartData = ref({});

const tableData = ref();
const columns = [
	{
		label: '日期',
		prop: 'time',
		width: '100'
	},
	{
		label: '违章总数',
		prop: 'totalNum',
		width: '80'
	},
	{
		label: '一般违章人数',
		prop: 'label1',
		width: '110'
	},
	{
		label: '严重违章人数',
		prop: 'label2',
		width: '110'
	},
	{
		label: '重大违章人数',
		prop: 'label3',
		width: '110'
	}
];

// 每页数据量
let pageSize = ref(5),
	// 当前页
	pageCurrent = ref(1),
	// 数据总量
	total = ref(0);

// 分页触发
const change = (e) => {
	getData(e.current);
};

const getData = (pageCurrent) => {
	getInformationPage({
		pageSize: pageSize.value,
		pageNum: pageCurrent,
		checkControlTime: newdate.value
	}).then((res) => {
		res.data?.rows.map((_) => {
			_.label1 = _.labelMap.label1;
			_.label2 = _.labelMap.label2;
			_.label3 = _.labelMap.label3;
		});
		tableData.value = res.data?.rows;
		total.value = res.data?.total;
	}).finally(() => collapse.value.init())
};


function getData1() {
	getInformationPage({
		pageSize: 9999,
		pageNum: 1,
		checkControlTime: newdate.value
	}).then((res) => {
		res.data.categories = [];
		res.data.lable1Data = [];
		res.data.lable2Data = [];
		res.data.lable3Data = [];
		res.data?.rows.map((_) => {
			res.data.categories.push(_.time);
			res.data.lable1Data.push(_.labelMap?.label1);
			res.data.lable2Data.push(_.labelMap?.label2);
			res.data.lable3Data.push(_.labelMap?.label3);
		});
		// chartData.value.categories = res.data?.categories;
		// chartData.value.series[0].data = res.data?.lable1Data;
		// chartData.value.series[1].data = res.data?.lable2Data;
		// chartData.value.series[2].data = res.data?.lable3Data;
		chartData.value = {
			categories: res.data?.categories,
			series: [
				{
					name: '一般违章',
					data:  res.data?.lable1Data
				},
				{
					name: '严重违章',
					data: res.data?.lable2Data
				},
				{
					name: '重大违章',
					data: res.data?.lable3Data
				}
			]
		};
		
		
	})
}

function getData2() {
	getInformation({
		checkControlTime: newdate.value,
		controlTime:newdate.value
	}).then((res) => {
		totalData.value = res.data
	});
}

function loadFn() {
	// getData(1);
	// getData1();
	// getData2();
	
	Promise.allSettled([getData(1),getData1(),getData2()]).then(_ => {
		nextTick(() => {
			collapse.value.init()
		})
	})
}

// let debounceLoad =  debounce(loadFn)

// watch(
// 	() => newdate.value,
// 	() => {
// 		debounceLoad()
// 	}
// );
onShow(() => {
	// debounceLoad()
	setTimeout(()=>{
		loadFn()
	},500)
});
</script>

<style lang="scss" scoped></style>
